<template>
  <div class="box">
      <mt-header class="mt-header" title="运动户外">
            <router-link to="/" slot="left">
              <mt-button class="iconfont icon-jiantou3"></mt-button>
            </router-link>
          </mt-header>
      <div class="content">
        <div class="banner">
            <mt-swipe :auto="4000">
              <mt-swipe-item v-for = "(item, index) of bannerlist" :key ="index">
                <img :src="item" alt="">
              </mt-swipe-item>
            </mt-swipe>
        </div>
        <Sportlist :sportlist = "sportlist"/>
      </div>
    </div>
</template>

<script>
import Sportlist from '@/components/Sportlist'
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'
import axios from 'axios'
Vue.use(Swipe, SwipeItem)
export default {
  data () {
    return {
      sportlist: [],
      bannerlist: []
    }
  },
  components: {
    Sportlist
  },
  created () {
    axios.all([this.getBannerList(), this.getSportList()])
      .then(axios.spread((bannerData, sportData) => {
        // 两个请求现在都执行完成
        console.log(bannerData)
        console.log(sportData)
        let arr = []
        bannerData.data.map(item => {
          arr.push('/taotao/' + item)
        })
        this.bannerlist = arr
        this.sportlist = sportData.data
      }))
  },
  methods: {
    getBannerList () {
      return axios.get('/taotao/banner')
    },
    getSportList () {
      return axios.get('/taotao/douban')
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.banner {
  width: 100%;
  height: 160px;
  @include background-color(#eee);
  .mint-swipe {
  width: 100%;
  height: 160px;
    img {
      width: 100%;
    }
  }
}
</style>
